<!--代码逻辑和样式库-->
<script src="./user-manage.component.js"></script>
<style src="./user-manage.scss" scoped lang="scss"></style>

<template>
  <div>
    <div class="search-container">
      <el-form :model="searchForm" label-position="top" label-width="80px">
        <div class="aq-padding-bottom-8">数据筛选</div>
        <el-row :gutter="20" type="flex">
          <el-col :span="6">
            <el-form-item class="aq-form-card">
              <div>用户搜索<span class="aq-search-text">请输入用户编码/用户名称搜索</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.queryStr" placeholder="请输入编号/用户名" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <!--<el-col :span="6">
            <el-form-item class="aq-form-card">
              <div>职位筛选</div>
              <el-select class="aq-width-full" v-model="searchForm.roleIds" suffix-icon="el-icon-arrow-down" multiple filterable remote reserve-keyword placeholder="请选择职位名称" :remote-method="remoteMethod" @focus="remoteMethod('')" @keyup.enter.native="search">
                <el-option v-for="item in roles" :key="item.objectId" :label="item.name" :value="item.objectId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="aq-form-card">
              <div>组织架构筛选</div>
              <el-cascader class="aq-width-full" ref="cascader" :show-all-levels="false" size="medium" v-model="searchForm.structIds" :options="structs" :props="defaultProps"></el-cascader>
            </el-form-item>
          </el-col>-->
          <el-col :span="4" class="action-buttons">
            <div class="aq-search-button aq-primary-button" @click="search()">筛选</div>
            <div class="aq-search-button aq-warning-button" @click="onReset()">重置</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container">
      <div>用户信息数据</div>
      <div class="aq-padding-top-16 aq-padding-bottom-16">
        <el-button type="success" @click="openCreateOrEditDialog()">创建用户</el-button>
        <el-button type="danger" @click="deleteSelectedData()">批量删除</el-button>
      </div>
      <!--用户列表table-->
      <el-table v-loading="loading" :data="data" border fit highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
        <el-table-column type="index" :index="setIndex" label="序号" width="55" />
        <el-table-column prop="userName" label="用户编号" width="200">
          <template slot-scope="scope">
            <el-link @click="openDetailDialog('password',scope.row.objectId)" type="primary">{{ scope.row.userName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="trueName" label="用户姓名" width="200" />
        <el-table-column prop="mobileNumberMask" label="手机号码" width="200" />
        <el-table-column prop="sex" label="性别" width="100" />
        <el-table-column prop="structCode" label="部门编码" width="200">
          <template slot-scope="scope">
            <el-link @click="openDepartmentDetailDialog(scope.row)" type="primary">{{ scope.row.structCode }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="structName" label="所属部门" width="200" />
        <el-table-column prop="roleNames" label="职位" width="200" />
        <el-table-column label="账号状态" width="100" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" disabled></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="300">
          <template slot-scope="scope">
            <el-button v-if="codesCheck.indexOf('Edit') != -1" type="primary" size="mini" plain @click="resetPassword(scope.row)">重置密码</el-button>
            <el-button v-if="codesCheck.indexOf('Delete') != -1" type="danger" size="mini" plain @click="deleteSelectedData(scope.row.objectId,scope.row.userName)">删除</el-button>
            <el-button v-if="codesCheck.indexOf('Edit') != -1" type="success" size="mini" plain @click="openCreateOrEditDialog(scope.row.objectId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <pagination class="pagination" v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getDataList" />
    </div>
    <!-- 创建，编辑 -->
    <create-user v-if="editDialogVisible" :user-id="selectUserId" @reload="reload()" @close="closeCreateOrEditDialog"></create-user>
    <!-- 详情 -->
    <detail-user v-if="detailDialogVisible" :type="type" :user-id="selectUserId" @close="closeCreateOrEditDialog"></detail-user>
    <!-- 部门详情 -->
    <department-detail v-if="departmentDetailDialogVisible" :struct-id="selectRow.structId" @close="closeDepartmentDetailDialog"></department-detail>
  </div>
</template>
